<template>
	<view class="my-info">
		<!-- <view class="add">
      <u-icon name="plus-circle"  size="30" @tap="toAddComment"></u-icon>
    </view> -->
		<view class="avator">
			<u-avatar :src="user.avatar ? user.avatar:'@/static/images/profile/avator.png'" size="80"></u-avatar>
		</view>
		<view class="name">
			{{user.nickname}}
		</view>
		<view class="info">
			全部 {{comment_count.comment_count}} ｜ 我的 {{comment_count.my_comment_count}}
		</view>
		<view class="profile">{{user.profile}}</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: {
			// 消息总数
			comment_count: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		data() {
			return {

			};
		},
		computed: {
			...mapState({
				user: (state) => state.user.user
			}),
		},
	}
</script>

<style lang="scss">
	.my-info {
		height: 420upx;
		background-image: url(@/static/images/profile/community/bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;

		.avator {
			display: flex;
			justify-content: center;
		}

		.name {
			height: 60upx;
			line-height: 60upx;
			text-align: center;
			font-size: 30upx;
		}

		.info {
			height: 60upx;
			line-height: 60upx;
			text-align: center;
			font-size: 22upx;
		}

		.profile {
			height: 60upx;
			line-height: 60upx;
			text-align: center;
			font-size: 26upx;
		}

		.add {
			padding: 10upx 10upx 0;
			display: flex;
			justify-content: flex-end;
		}
	}
</style>
